<!DOCTYPE html>
<html>

<head>
  <title>LocalStorage Copy Tool</title>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      width: 300px;
      padding: 10px;
    }

    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    button {
      background-color: #4285f4;
      color: white;
      border: none;
      padding: 8px;
      border-radius: 4px;
      cursor: pointer;
      width: 200px;
    }

    button:hover {
      background-color: #3367d6;
    }

    .btn-danger {
      background-color: rgb(251, 114, 45);
    }

    .btn-danger:hover {
      background-color: rgb(245, 84, 15);
    }

    #importBtn {
      background-color: rgb(24, 172, 24);
    }

    #importBtn:hover {
      background-color: rgb(0, 128, 0);
    }

    textarea {
      width: 100%;
      height: 150px;
      margin: 8px 0;
    }

    .status {
      color: rgb(24, 172, 24);
      margin-top: 8px;
    }

    .error {
      color: red;
      margin-top: 8px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>LocalStorage Copy Tool</h2>

    <div>
      <button id="exportBtn">Export LocalStorage</button>
      <div id="exportStatus" class="status"></div>
    </div>
    <div id="storageDataContainer">
      <div id="sourceUrl" style="margin-bottom: 10px; font-weight: light;color: #1e1e1e;word-break: break-all;"></div>
      <textarea id="storageData" rows="10" class="form-control mb-3"
        placeholder="LocalStorage data will appear here. You can also paste data here to import."> </textarea>
    </div>
    <div>
      <button id="importBtn">Import to LocalStorage</button>
      <div id="importStatus" class="status"></div>
    </div>

    <div>
      <button id="clearBtn" class="btn btn-danger">Clear LocalStorage</button>
      <div id="clearStatus" class="status"></div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>

</html>